<template>
  <div class="box">
    <headerTwo class="headerBox">添加教练 </headerTwo>
    <div class="btnBOX">
      <el-button @click="returnBox" size="small" style="margin-right: 20px"
        >返回</el-button
      >
    </div>
    <div class="mainBox">
      <el-form :model="form" label-width="120px" style="width: 50%">
        <el-form-item label="头像:">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemoveOne"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500KB.
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别:">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="男" name="type" />
            <el-checkbox label="女" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="手机:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="签名:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="简介:" type="textarea">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="从业时间:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="擅长标签:" style="display: flex">
          <span class="spanStyle">123</span>
          <span class="spanStyle">123</span>
          <el-input v-model="form.name" placeholder="请输入标签名" />
          <el-button type="primary" style="margin-top: 15px">添加</el-button>
        </el-form-item>
        <el-form-item label="相册:">
          <el-upload
            v-model:file-list="fileListTwo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveBtn">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "../../router";

import headerTwo from "./headerTwoView.vue";
import { reactive, toRefs, ref } from "vue";
//上传
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([
  {
    name: "element-plus-logo.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
  {
    name: "element-plus-logo2.svg",
    url: "https://element-plus.org/images/element-plus-logo.svg",
  },
]);

const handleRemoveOne: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};
//上传结束
//图片上传
const fileListTwo = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "plant-1.png",
    url: "/images/plant-1.png",
  },
]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//结束
//保存按钮
const saveBtn: any = function () {
  router.push("/mainView/ListCoaches/listcoachesOne");
};
//返回btn
const returnBox: any = function () {
  router.push("/mainView/ListCoaches/listcoachesOne");
};
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;
  box-sizing: border-box;
}
.headerBox {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-bottom: none;
}
.mainBox {
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  padding: 30px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spanStyle {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid #409eff;
  margin-right: 10px;
  margin-bottom: 15px;
}
.addPicBtnStyle {
  display: block;
  margin-top: 10px;
}
.btnBOX {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
}
</style>
